 @import "variables.less";

.doc-sidenav {
    &.nav {
        margin: 30px 0 0;

        padding-top:    10px;
        padding-bottom: 10px;
        text-shadow: 0 1px 0 #fff;
        background-color: @app-bg;
        border-radius: 5px;

        >li {
            &.nav-header {
                font-weight: bold;
                color: hsl(220, 7%, 45%);
                text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
                text-transform: uppercase;
                > H5 {
                    padding-left: 10px;
                }
                > a {
                    padding-left: 15px;
                    margin-top: 0;
                }
            }

            &:not(:first-child):hover,
            &:not(:first-child):focus {
                background-color: @nav-link-hover-bg;
            }
            &.active {
                background-color: transparent;
                > a {
                    color: @brand-primary;
                    border-right: 1px solid @brand-primary;
                    > SPAN, H6 {
                        font-weight: bold;
                    }
                }
            }
            > a {
                background-color: transparent;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-left: 32px;
                color: hsl(220, 7%, 45%);

                &:focus {
                    outline: none;
                }
            }
            + .nav-header {
              margin-top: 9px;
            }
        }

        H5 {
            margin: 5px 0;
        }
        H6 {
            margin: 2px 0;
        }
        SPAN.highlight {
            background-color: #fff2a8;
            color: #000;
        }
    }
}

.doc-sidebar {
    padding-left: 2px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 10px;
    &.affix {
        top: 0;
        bottom: 0;
        overflow: auto;
    }

    CODE {
        padding: 0 4px;
        line-height: 11px;
        font-size: 11px;
    }
}

@media screen and (min-width: @screen-desktop) {
    .doc-sidebar.affix {
        width: 212px;
    }
}

@media screen and (min-width: @screen-lg-desktop) {
    .doc-sidebar.affix {
        width: 263px;
    }
}

@media screen and (min-width: @screen-vlg-desktop) {
    .doc-sidebar.affix {
        width: 362px;
    }
}


@media (max-width: @screen-sm-max) {
    body {
        padding-top: 0;
    }

    .doc-sidenav {
        width: auto;
        margin-bottom: 20px;
    }

    .doc-sidebar.affix {
        position: static;
        width: auto;
        top: 0;
    }
}